.active .answer + .answer {
    margin-top: .5rem !important;
}


.answer {
    line-height: 1;
    min-width: 7rem;
}

    .answer p {
        color: #757575;
        margin: 0;
    }

/*#region qs */

.qs {
    display: flex;
    flex-wrap: wrap;
    /* margin: 0 -.5rem; */
    /* justify-content: center; */
}

    .qs > li:not(.msg) {
        flex: 1 1 100%;
        padding: 0.7rem 0.7rem;
        margin: 0.3rem 0;
        /* min-height: 6rem; */
        border-radius: 7px;
        cursor: pointer;
        background: white;
        border: 1px solid var(--color-border);
        border: none;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    }

    .qs li > div:first-child label {
        margin-left: 3px;
    }

    .qs li > div:first-child .info label {
        /* font-size: 1.1em; */
        font-weight: bold;
        margin: 5px 0;
        position: relative;
        white-space: nowrap;
        line-height: 1;
    }

.open,
.msg-grp,
.qs {
    max-width: 36rem;
    margin: 0 auto;
}

    .qs li.active .question-wrap .question {
        display: block;
    }

    .qs li > * {
        width: 100%;
        display: block !important;
    }
    /*.qs > li:not(.active) .btns button.selected {
    background: none;
    color: var(--color-primary) !important;
    border: none;
    padding: 0;
    padding: 0  !important;
    margin: 0;
    text-align: left;
}
*/
    .qs > li:not(.active) .btns button.never.selected {
        color: #b5b5b5 !important;
    }

    .qs li:not(.msg).active {
        /* padding: 0.8rem 0.7rem; */
        background: white !important;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    }

    .qs li .question .info {
        flex: 1;
        line-height: 1.2;
    }

    .qs li .question .content > p {
        background: #F5F5FF;
        padding: 0.4rem .5rem;
        margin-top: .5rem;
        margin-bottom: 1rem;
        line-height: 1.3;
    }

    .qs li .info > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .qs li > div:first-child label, .side-menu .factor-legend .custom-checkbox label {
        font-size: 1rem;
    }

    .qs li.active .ans-label {
        display: none;
        /* visibility: hidden; */
        /* transition: 1s; */
    }
    /*make .content slide down on active */
    .qs li .content {
        transition: .8s;
        max-height: 0; /* Collapsed by default */
        overflow: hidden; /* Hide overflowing content */
    }
.link.ans-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 35vw;
    line-height: 1;
}


    .qs li:not(.active) .answers .answer label {
        /* color: var(--color-link); */
        margin-top: 5px;
    }

    .qs li .content a.helpme {
        /* display: block; */

        white-space: nowrap;
        /* font-size: 15px; */
        /* margin-right: 3px; */
    }



        .qs li .content > p {
            line-height: 1.3;
            margin: 0;
            /*white-space: pre-line;*/
        }


.optional .info + p{
    font-size:0.9em;
    line-height: 1.2;
    margin:0;
    color:gray;
}
/*.qs li .answer p {
    display: inline-block;
    color: gray;
   
    margin-right: 8px;
    flex: unset;
    margin-bottom: 0;
}
*/
/*#endregion */
/*#region answers */
.question-wrap li.active .answers {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.question-wrap .qs .answers .answer {
    border: none;
    margin: 0;
    padding: 0;
}

    .question-wrap .qs .answers .answer > div:first-child label {
        font-weight: normal;
        /* font-size: 1rem; */
        margin: 0;
    }


li.active .btns {
    margin: 1rem 0 0.3rem;
    /* border-top: 1px solid #d3d5ff47; */
    /* padding-top: 1rem; */
    /* max-width: 23rem; */
}



li .btns {
    display: flex;
    justify-content: center;
    max-width: 25rem;
}


    li .btns .form-group {
        margin: 0;
        padding: 0;
        line-height: 1;
        /* margin-left:1rem; */
    }

    li .btns button {
        /* font-size: 1rem !important; */
        /* padding: 0.4rem 0.95rem !important; */
    }

        li .btns button.never {
            border-color: #b5b5b5;
            color: #979797;
            margin: 0;
        }

li .byImportance .btns button {
    /* line-height: 1.2; */
    margin-right: 0 !important;
    /* padding: .25rem 0.85rem !important; */
}

li .btns button.selected:not(:hover) {
    background: var(--color-primary);
    color: white !important;
    border-color: var(--color-primary) !important;
}

li .btns button.selected.never {
    background: #b5b5b5;
    color: white !important;
    border-color: #b5b5b5;
}

.qs li .form-fields {
    margin: 0.7rem .5rem 0.3rem;
    max-width: 13rem;
}

    .qs li .form-fields.full {
        max-width: 100%;
    }

/*#endregion */
/*#region q-footer */
.q-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    border-top: 1px solid #d3d5ff47;
    padding-top: .75rem;
}

    .q-footer button {
        margin: 0;
    }

        .q-footer button.btn-outline-secondary {
            border-color: #c5c5ff;
        }

/*#endregion */

/*#region tips */

.tip {
    background: #fffed0;
    padding: .5rem;
    border-radius: 7px;
    margin: 0.75rem 0 0;
    display: flex;
    /*max-width: 23rem;*/
    font-size: 0.9em;
    gap: 5px;
    align-items: baseline;
}

    .tip i {
        font-size: 14px !important;
        min-width: 1.5em;
    }
    /*#endregion */
    /*#region msg */
    .msg {
        background: #eee9f6;
        margin: 0.5rem 0;
        padding: 1rem;
        font-size: 1rem;
        border-radius: 7px;
        display: inline-block;
        /* flex: 1 1 100%; */
        margin: 0.5rem 0;
        max-width: 26rem;
    }

    .msg b {
        font-weight: 500;
        /* display: block; */
    }
    /*#endregion */


    /*#region msg alter */

    .msg .alter {
        display: flex;
        background: white;
        padding: .5rem;
        gap: .5rem;
        border-radius: 7px;
    }

        .msg .alter img {
            width: 3rem;
        }

        .msg > div:first-child + .alter,
        .msg .alter + * {
            margin-top: .5rem;
        }

        .msg .alter .altr-variant {
            color: gray;
            flex: 1 1 100%;
        }
/*#endregion */
@media only screen and (min-width: 1024px) {
    .qs li .form-fields .short {
        flex: 0 0 9rem;
    }
}




@media only screen and (max-width: 667px) {

    #toFactors .qs > li,
    .usages:not(.weights) .qs li {
        flex: 1 1 100%;
        min-height: unset;
    }

    li.active .btns {
        margin: 0.7rem 0 0.3rem;
    }
}